<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>KOM IGÅNG MED BRACKETS</title>
        <meta name="description" content="En interaktiv genomgång av Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <h1>KOM IGÅNG MED BRACKETS</h1>
        <h2>Detta är din guide!</h2>
        
        <!--
            SKAPAD MED <3 OCH JAVASCRIPT
        -->
        
        <p>
            Välkommen till en tidig version av Brackets, en ny open-source editor för nästa generation av webben.
            Vi är hängivna anhängare av webbstandarder och vill bygga bättre verktyg för JavaScript, HTML och CSS
            samt relaterade öppna webbteknologier. Detta är vårt första ödmjuka steg.
        </p>
        
        <!--
            VAD ÄR BRACKETS?
        -->
        <p>
            <em>Brackets är en annan typ av editor.</em>
            En anmärkningsvärd skillnad är att denna editor är skriven i JavaScript, HTML och CSS.
            Detta innebär att de flesta som använder Brackets har kunskapen som krävs för att förändra och förbättra editorn.
            Faktum är att vi använder Brackets varje dag, för att bygga Brackets. Det har också ett antal unika funktioner som Quick Edit,
            Live Preview och och ytterligare några som du inte hittar i andra editorer.
            Läs vidare för att lära dig mer om dessa funktioner.
        </p>
        
        
        <h2>Vi provar en del nya saker</h2>
        
        <!--
            FÖRHÅLLANDET MELLAN HTML, CSS OCH JAVASCRIPT
        -->
        <h3>Quick Edit för CSS och JavaScript</h3>
        <p>
            Du behöver inte längre tappa sammanhanget när du flyttar mellan olika dokument. När du redigerar HTML kan du
            använda kortkommandot <kbd>Cmd/Ctrl + E</kbd> för att öppna en inline-editor som visar all relaterad CSS.
            Gör förändringen i din CSS, tryck på <kbd>ESC</kbd> och du är tillbaka i HTML. Du kan också lämna CSS-reglerna
            öppna och göra dem till en del av din HTML-editor. Om du trycker på <kbd>ESC</kbd> utanför en inline-editor
            döljs samtliga.
        </p>
        
        <samp>
            Vill du se hur det fungerar? Placera markören på <!-- <samp> -->-elementet ovan och tryck <kbd>Cmd/Ctrl + E</kbd>.
            Då visas CSS quick editorn ovan. Till höger kan du se en lista över alla CSS-regler som är relaterade
            till detta element. Det fungerar även på klass och ID-attribut.
            
            Du kan skapa nya regler på samma sätt. Klicka på en av <!-- <p> -->-taggarna ovan och tryck <kbd>Cmd/Ctrl + E</kbd>.
            Just nu finns det inga regler men genom att klicka på knappen Ny regel skapar du en ny stilregel för <!-- <p> -->-taggar.
        </samp>
        
        <a href="screenshots/quick-edit.png">
            <img alt="En skärmdump som visas CSS Quick Edit" src="screenshots/quick-edit.png" />
        </a>
        
        <p>
            Samma kortkommandon kan användas även på andra saker, till exempel funktioner i JavaScript för att ändra<br>
            färger, tidsfunktioner för animering och nya saker läggs till hela tiden!
            Just nu kan inte inline-editorer nästlas så du kan bara använda Quick Edit från den "fullstora" editorn.
        </p>
        
        <!--
            REALTIDSFÖRHANDSVISNING
        -->
        <h3>Förhandsvisa CSS-ändringar direkt i webbläsaren</h3>
        <p>
            Du vet den där "spara och ladda om"-proceduren vi använt oss av i flera år? Den där du gör
            en ändring i din editor, sparar, går till webbläsaren och laddar om för att se resultatet?
            Med Brackets behöver du inte göra det.
        </p>
        <p>
            Brackets öppnar en <em>direktlänk</em> till din lokala webbläsare och skjuter ut dina HTML- och CSS-ändringar
            medan du skriver! Du kanske redan använder något liknande webbläsarverktyg men med Brackets
            behöver du inte kopiera och klistra in koden fram och tillbaka mellan webbläsare och editor. Din kod
            körs i webbläsaren men skrivs i din editor!
        </p>
        
        <h3>Markera HTML-element och CSS-regler i realtid</h3>
        <p>
            Brackets gör det enkelt att se hur dina HTML- och CSS-ändringar kommer att påverka sidan. När din markör
            står på en CSS-regel markerar Brackets samtliga berörda element i webbläsaren. På samma sätt markerar
            Brackets respektive element i webbläsaren när du redigerar HTML-koden.
        </p>
        
        <samp>
            Om du har Google Chrome installerat kan du prova denna funktion själv. Klicka på blixtikonen
            i det övre högra hörnet i ditt Brackets-fönster eller använd kortkommandot <kbd>Cmd/Ctrl + Alt + P</kbd>.
            När Live Preview är aktiverat i ett HTML-dokument kommer alla länkade CSS-dokument att kunna redigeras
            i realtid. Ikonens färg kommer att byta färg från grå till guld när Brackets lyckats skapa en länk
            till din webbläsare.
            
            Om du sedan placerar markören på <!-- <img> -->-taggen ovan ser du hur en blå markeringen visas runt
            bilden i Chrome. Du kan sedan använda <kbd>Cmd/Ctrl + E</kbd> för att visa de relaterade CSS-reglerna.
            Prova att ändra tjockleken på border-egenskapen från 10px till 20px eller att ändra backgrundsfärgen
            från "transparent" till "hotpink". Om Brackets och din webbläsare körs sida vid sida kommer du att se
            dina ändringar genomföras direkt i webbläsaren. Coolt va?
        </samp>
                
        <p class="note">
            För tillfället stöder Brackets bara Live Preview för HTML och CSS. Dock laddas webbläsaren automatiskt när du
            sparar HTML- eller JavaScript-dokument. Vi jobbar för fullt med att utveckla stöd för Live Preview
            även för JavaScript. Live preview fungerar just nu bara i Google Chrome men med tiden hoppas
            vi kunna erbjuda denna funktionalitet i alla vanligt förekommande webbläsare.
        </p>
                
        <h3>Quick View</h3>
        <p>
            För de av oss som fortfarande inte memorerat färgkoderna för HEX eller RGB gör Brackets det snabbt och
            enkelt att se vilken färg som används. När du pekar på ett färgvärde eller gradient, i antingen
            HTML eller CSS, visas en förhandsgranskning av färgen/gradienten automatiskt. Detsamma gäller bilder:
            peka på bildens sökväg i Brackets så visas en tumnagelversion av bilden.
        </p>
        
        <samp>
            Du kan prova Quick View själv genom att placera markören på <!-- <body> -->-taggen i början av detta
            dokument och trycka <kbd>Cmd/Ctrl + E</kbd> för att öppna snabbeditorn för CSS. När du pekar över ett
            färgvärde i CSS-koden visas motsvarande färg. Du kan utnyttja samma funktion med gradients i snabbeditorn -
            placera markören på <!-- <html> -->-taggen och peka på dess background-image-egenskap. Du kan också prova
            förhandvisningen av bilder genom att placera markören vid skärmdumpen tidigare i detta dokument.
        </samp>
        
        <h3>Behöver du någonting annat? Prova ett tillägg!</h3>
        <p>
            Utöver alla bra funktioner som är inbyggda i Brackets har vårt stora, och växande, community av
            tilläggsutvecklare tagit fram mer än hundra tillägg som ger mer användar funktionalitet. Om du saknar
            någonting i Brackets är det stor chans att att någon redan byggt ett tillägg för att lösa det.
            För att bläddra eller söka i listan över tillgängliga tillägg går du till <strong>Arkiv > Tilläggshanteraren</strong>
            och klickar på fliken "Tillgängliga". När du hittat ett tillägg du vill ha klickar du bara på knappen "Installera"
            intill det.
        </p>
        
        <!--
            BERÄTTA FÖR OSS VAD DU TYCKER
        -->
        <h2>ENGAGERA DIG</h2>
        <p>
            Brackets är ett open-source-projekt. Webbutvecklare från hela världen bidrar för att göra Brackets till
            en bättre kodeditor. Många andra bygger tillägg som ökar Brackets funktionalitet.
            Berätta för oss vad du tycker, dina åsiker och idéer eller bidra med kod direkt till projektet.
        </p>
        <ul>
            <li><a href="http://brackets.io">Brackets.io</a></li>
            <li><a href="http://blog.brackets.io">Brackets utvecklingsblogg</a></li>
            <li><a href="http://github.com/adobe/brackets">Brackets på GitHub</a></li>
            <li><a href="https://brackets-registry.aboutweb.com">Register över Brackets-tillägg</a></li>
            <li><a href="http://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
            <li><a href="http://groups.google.com/group/brackets-dev">Brackets Developer Mailing List</a></li>
            <li><a href="https://twitter.com/#!/brackets">@Brackets på Twitter</a></li>
            <li>Chatta med Brackets-utvecklare via IRC i #brackets på Freenode</li>
        </ul>

    </body>
</html>
<!--

    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[     CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io  ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]

-->
